<template>
    <view style="width: 44.7vw; max-width: 400rpx; border-bottom: 1px solid #f2f2f2" class="mb-sm box" @click="$emit('click', item)">
        <view class="p-relative " style="width: 44.7vw; max-width: 400rpx; height: 44.7vw; max-height: 400rpx">
            <image :src="item.avatar" mode="aspectFill" class="fit rasim" />
            <view class="p-absolute tag" style="top: 0rpx; right: 0rpx;">
              {{getTypeList(item._id) + ' '+ $t('infos')}}
            </view>
        </view>
        <view class="infoes">
            <view class="title">{{$t('dir') == 'rtl' ? item.title  : item.title_cn }}</view>
            <view class="row items-center justify-between mt-xs">
                <view class="row items-center">
                    <view class="text-red fs-sm">{{getposition(item.address)}}</view>
                </view>
                <view class="row items-center">
                    <view class="text-red fs-sm">{{formatTimeAgo(item.updated_at)}}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            directionList: [
                { label: '', val: '' },
                { label: this.$t('dong'), val: 1 },
                { label: this.$t('nan'), val: 2 },
                { label: this.$t('xi'), val: 3 },
                { label: this.$t('bei'), val: 4 },
                { label: this.$t('dongxi'), val: 5 },
                { label: this.$t('nanbei'), val: 6 },
                { label: this.$t('dongnan'), val: 7 },
                { label: this.$t('xinan'), val: 8 },
                { label: this.$t('dongbei'), val: 9 },
                { label: this.$t('xibei'), val: 10 },
            ],
        }
    },
    methods: {
        formatTimeAgo(timestamp) {
            if (!timestamp) return "";

            const now = new Date().getTime();
            const date = new Date(timestamp).getTime();
            const diff = now - date;

            // ۋاقىت پەرقىنى ھېسابلاش
            const minutes = Math.floor(diff / (1000 * 60));
            const hours = Math.floor(diff / (1000 * 60 * 60));
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const months = Math.floor(days / 30);
            const years = Math.floor(days / 365);

            const lang = uni.getStorageSync("lang") || "ug";

            if (minutes < 1) return lang === "ug" ? "ھازىرلا" : "刚刚";
            if (minutes < 60) return lang === "ug" ? `${minutes} مىنۇت بۇرۇن` : `${minutes}分钟前`;
            if (hours < 24) return lang === "ug" ? `${hours} سائەت بۇرۇن` : `${hours}小时前`;
            if (days < 30) return lang === "ug" ? `${days} كۈن بۇرۇن` : `${days}天前`;
            if (months < 12) return lang === "ug" ? `${months} ئاي بۇرۇن` : `${months}月前`;
            return lang === "ug" ? `${years} يىل بۇرۇن` : `${years}年前`;
        },
        getTypeList(id) {
          const lang = uni.getStorageSync("lang") || "ug";
            const typeList = [
                { titleCn: "店铺", title: "دۇكان-ساراي", id: 1 },
                { titleCn: "找工作", title: "خىزمەت", id: 2 },
                { titleCn: "招员工", title: "خىزمەتچىلەر", id: 3 },
                { titleCn: "综合", title: "ئونۋېرسال ", id: 4 },
                { titleCn: "房产", title: "ئۆي-مۈلۈك", id: 5 },
                { titleCn: "车", title: "ماشىنا", id: 6 },
                { titleCn: "出租房", title: "ئىجارە-ئۆي", id: 7 },
                { titleCn: "买卖", title: "سودا-سېتىق", id: 8 },
                { titleCn: "二手", title: "نىمكەش ماللا", id: 9 },
                { titleCn: "农业", title: "يېزا-ئىگىلىك", id: 10 },
                { titleCn: "微商", title: "ئۈندىدار سودا", id: 11 },
                { titleCn: "牲畜", title: "مال-چارۋا", id: 12 },
                { titleCn: "家电", title: "ئېلىكتىر سايمان", id: 13 },
                { titleCn: "园地", title: "باغ ئۇچۇرى", id: 14 },
                { titleCn: "零工", title: "كۈنلۈك ئىش", id: 15 }
            ];
            const type = typeList.find(item => item.id === id);
            return lang === "ug" ? type.title : type.titleCn;
        },
        getposition(value) {
              const lang = uni.getStorageSync("lang") || "ug";
            const positionList = [
                { labelCn: "库尔勒市", label: "كورلا شەھىرى", value: 1 },
                { labelCn: "轮台县", label: "بۈگۈر", value: 2 },
                { labelCn: "尉犁", label: "لوپنۇر", value: 3 },
                { labelCn: "若羌县", label: "چاقىلىق", value: 4 },
                { labelCn: "且末县", label: "چەرچەن", value: 5 },
                { labelCn: "焉耆", label: "قاراشەھەر", value: 6 },
                { labelCn: "和静县", label: "خېجىڭ", value: 7 },
                { labelCn: "和硕县", label: "خوشۇت", value: 8 },
                { labelCn: "博湖", label: "باغراش", value: 9 }
            ];
            const position = positionList.find(item => item.value === value);
            return lang === "ug" ? position.label : position.labelCn;
        }
    },
}
</script>
<style scoped>
.tag {
    background: linear-gradient(#ddf2eb,#91e9cc);
    border-radius: 0 25rpx  0 25rpx ;
    padding: 2rpx 18rpx;
    font-size: 30rpx;
    color: #015035;
    
}
.box{
    background: #fff;
    border-radius: 25rpx;
    margin:5px auto 0;
    box-shadow: 0px 0px 20px 1px #cccccc47;
}
.infoes{
    padding:10px ;
}
.rasim{
    border-radius: 25rpx 25rpx 0 0;
}
.title {
    font-size: 28rpx;
    line-height: 1.3;
    height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
</style>